/*
 * @Author: yangrongxin
 * @Date: 2021-06-07 16:51:33
 * @LastEditors: guoju
 * @LastEditTime: 2022-01-07 11:29:03
 */
import React, { useEffect, useState, useContext } from 'react';
import Taro from '@tarojs/taro';
import { View, Text, Canvas } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
// import lottie from 'lottie-miniprogram';
import { debounce } from 'lodash';
// import likeJson from '@/const/like';
// import { likeArticle } from '../../../../service';
import VideoComponent from '../../../VideoComponent';
import styles from '../../index.module.less';

const VideoItem = ({
  articleId,
  title,
  subhead,
  content,
  timeInterval,
  cover,
  readCount,
  likeCount: propsLikeCount,
  like,
}) => {
  const [curLike, setCurLike] = useState(like);

  const [likeCount, setLikeCount] = useState(propsLikeCount);

  const [renderLottie, setRenderLottie] = useState(false);

  let likeBtn;

  const initLike = () => {
    if (likeBtn) return;
    Taro.createSelectorQuery()
      .select(`#canvas${articleId}`)
      .node((res: any) => {
        const canvas = res.node;
        const context = canvas.getContext('2d');
        lottie.setup(canvas);
        likeBtn = lottie.loadAnimation({
          rendererSettings: {
            context,
          },
          loop: false,
          autoplay: false,
          animationData: likeJson,
        });
        setRenderLottie(true);
      })
      .exec();
  };

  return (
    <View className={styles.videoItem}>
      <Text>{title}</Text>
      <Text>{subhead}</Text>
      {/* TODO: 根据滚动去查询视频地址 */}
      <VideoComponent cover={cover} articleId={articleId} timeInterval={timeInterval} videoId={content} />
      <View>
        <Text>{readCount}播放</Text>
        <Text></Text>
        <View>
          <View>
            {!renderLottie && <AtIcon value="heart-2" size="20" color={curLike ? '#F57878' : '#ccc'} />}
            <Canvas id={`canvas${articleId}`} type="2d" />
          </View>
          <Text>赞</Text>
          <Text>{likeCount}</Text>
        </View>
      </View>
    </View>
  );
};

export default React.memo(VideoItem);
